/*
 * @Author: yangzonglong
 * @Date: 2021-02-22 14:03:03
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-30 14:20:09
 * @Auditor:
 */
import React, { memo } from 'react';
import { Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import useFdStore from '../../../hooks/useFdStore';
import ControlSetting from './ControlSetting';
import { menus } from './../../../config';
// import { menus as tablemenus } from '../../../components/table/config';
import Icon from '../../../components/icon/Icon';
import style from './../../design.module.scss';
import classNames from 'classnames';

// const menusMap = tablemenus.reduce((next, cur: any) => {
//   next[cur.controlType] = cur.text;
//   return next;
// }, {});

const flatMenus = menus.reduce((next, cur) => {
  const temp = cur.children.reduce((next, cur) => {
    next[cur.type] = cur;
    return next;
  }, {});

  return Object.assign(next, temp);
}, {});

export default memo(() => {
  const {
    state: { curControl, tableCurrentController, dataListCurrentController, hideMenus },
  } = useFdStore();
  const control = flatMenus[curControl!.type];

  return (
    <div className={classNames(style.setting, hideMenus ? style.addWidth : '')}>
      {curControl?.type === 'table' ? <div className={style.settingName}>
        {tableCurrentController?.curColumn?.type ? (
          <span>
            <Icon onClick={() => tableCurrentController?.fn?.({})} icon="&#xe634;" />
            {/* 表格 · {menusMap[tableCurrentController?.curColumn?.type]} */}
          </span>
        ) : (
          <span>表格</span>
        )}
      </div> : dataListCurrentController?.curColumn?.id ? <div className={style.settingName}>
        {dataListCurrentController?.curColumn?.id ? (
          <span>
            <Icon onClick={() => dataListCurrentController?.fn?.({})} icon="&#xe634;" />
            数据列表 · Tab {dataListCurrentController.curColumn.lable}
          </span>
        ) : (
          <span>数据列表</span>
        )}
      </div> : (
        <div className={style.settingName}>
          <span>{control.title}</span>
          {control.desc && (
            <Tooltip title={control.desc}>
              <QuestionCircleOutlined />
            </Tooltip>
          )}
        </div>
      )}
      <div className={style.settingMain} id="setting">
        <ControlSetting key={curControl?.id} curControl={curControl} />
      </div>
    </div>
  );
});
